<template>
  <div>
    <!-- tab标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="全部" name="first">
    <!-- <list ref="ListItem"></list> -->
    <!-- <el-button>默认按钮</el-button> -->
    </el-tab-pane>
    <el-tab-pane label="待审核" name="second">
    <!-- <list  :state="0"></list> -->
    </el-tab-pane>
    <el-tab-pane label="已审核" name="third">
    <!-- <list  :state="1"></list> -->
    </el-tab-pane> 
     <el-tab-pane label="已拒绝" name="fourth">
    <!-- <list  :state="2"></list> -->
    </el-tab-pane>
    </el-tabs>

    <el-alert
      :title="`共计${counts}条`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120">
        <template slot-scope="{ row }">
          <span v-if="row.questionType === '1'">单选</span>
          <span v-if="row.questionType === '2'">多选</span>
          <span v-if="row.questionType === '3'">简答</span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="300">
        <template slot-scope="{ row }">    
          <span v-html="row.question">单选</span>
        </template>    
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="120">
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="{ row }">
          <span v-if="row.difficulty === '1'">简单</span>    
          <span v-if="row.difficulty === '2'">一般</span>
          <span v-if="row.difficulty === '3'">困难</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">   
        <template slot-scope="{ row }">
          <el-button @click="handleClick(row)" type="text" size="small"
            >预览</el-button
          >
          <el-button type="text" size="small" :disabled="row.chkState !== 0" @click.native="CheckFn(row.chkState,row.id)">审核</el-button>
          <el-button type="text" size="small" :disabled="row.publishState === 1">修改</el-button>
          <el-button type="text" size="small" v-if="row.publishState === 0" @click.native="changeFn(row.id, row.publishState)">上架</el-button>
          <el-button type="text" size="small" v-if="row.publishState === 1" @click.native="changeFn(row.id, row.publishState)">下架</el-button>
          <el-button type="text" size="small" :disabled="row.publishState === 1" @click.native="delFn(row.id)">删除</el-button>
        </template>
      </el-table-column>  
    </el-table>

    <!-- 分页组件 -->
    <!-- 3个变量：每页数量、页码数、总数  -->
    <!-- 2个事件：页码切换事件、每页数量切换事件-->
    <el-pagination
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="allList.page"
      :page-sizes="[3, 4, 5, 10]"
      :page-size="allList.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts"
    >
    </el-pagination>


    <!-- 弹框组件 1 -->
    <el-dialog
      title="提示"
      :visible.sync="showDialog"
      width="30%"
      @close="close">
      <el-form>
        <el-form-item>
          <el-radio-group v-model="tableList.chkState">
           <el-radio  :label="1">通过</el-radio>
           <el-radio  :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
       
          <el-form-item label="审核评价：" prop="">
          <el-input v-model="tableList.chkRemarks" placeholder="请输入内容" rows="3"></el-input>
        </el-form-item>

      <el-form-item>
        <el-button @click="showDialog = false">取消 </el-button>
        <el-button type="primary" @click="btnOK">确定</el-button>
        </el-form-item>
      

    </el-form>
    </el-dialog>

    <!-- 预览弹框组件 -->
    <!-- <el-dialog
      title="提示"
      :visible.sync="previewDialog"
      width="30%"
      @close="close">
      <el-form  label-width="80px" :inline="true" size="normal">
        <el-form-item label="【题型】">
          
        </el-form-item>

        <el-form-item>
          <el-button>关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
    
    

  </div>
</template>

<script>
// import List from "./list.vue";
import { getSubjectListApi , changePublishStateApi , delListApi, checkSuggestion} from "@/api/choice";

export default {
  name:'TableChange',
  components: {},
  data() {
    return {
      activeName: "first",
      showDialog:false,
      checkId:'',
      tableList: {
        chkState:1
      },
      previewDialog:true,

      counts: "",
      statue: "",
      allList: {
        page: 1,
        pagesize: 10,
      },
      tableData: [],
    };
  },
  created() {
    this.initData(this.allList);
  },        

  methods: {
    // 点击tab栏切换
    async handleClick({ index }) {
      console.log(index);
      if (index == 0) {
        this.initData(this.allList);
      } else if (index == 1) {  
        this.initData({
          ...this.allList,
          chkState:0
        })
      } else if(index == 2){
         this.initData({
          ...this.allList,
          chkState:1
        })
      } else if(index == 3){
         this.initData({
          ...this.allList,
          chkState:2
        })
      }
    },

// 点击审核
   async CheckFn(chkState, id){
      this.showDialog = true
      console.log(chkState, id);
     this.tableList.id = id

    },
    async btnOK(){
       await checkSuggestion(this.tableList)
       this.showDialog = false
       this.tableList = {chkState:1}

    },

    // 点击上架下架切换
   async changeFn(id , publishState){
    
    if(publishState === 0){
      await this.$confirm('确认上架这道题目吗？')
      await changePublishStateApi({
        id , 
        publishState:1
        })
        this.tableData.publishState= 1
        this.initData(this.allList)
    }else {
      await this.$confirm('确认下架这道题目吗？')
       await changePublishStateApi({
        id , 
        publishState:0
        })
         this.tableData.publishState= 0
         this.initData(this.allList)
    }
      
    },
    
    // 点击删除
    async delFn(id){
      
       await this.$confirm('确认删除这道题目吗？')
      await delListApi(id)
      this.initData()

    },

    async initData(val) {
      const res = await getSubjectListApi(val);
      this.tableData = res.items;
      this.counts = res.counts;
    },

    // 每页数量切换事件【列表功能】
    handleSizeChange(val) {
      // val是最新的每页数量
      console.log(`每页 ${val} 条`);
      this.allList.pagesize = val;
      this.$nextTick(() => {
        this.initData(this.allList);
      });
    },
    //页码切换事件【列表功能】
    handleCurrentChange(val) {
      // val是最新的页码
      console.log(`当前页: ${val}`);
      this.allList.page = val;
      this.initData(this.allList);
    },
  },
};
</script>

<style>
.el-dialog__header {
  background: #409eff
}
.el-dialog__title{
  color: #fff;
}
</style>
